<template>
	<view class="integral-rule">
		<!-- 积分规则 -->
		<view class="tab">
			<view>指标项描述</view>
			<view class="line"></view>
			<view>分值</view>
		</view>
		<view class="list">
			<view class="item" v-for="(items,index) in ruleList" :key="index">
				<view class="left">
					<view class="title">{{items.itemName}}</view>
					<view class="desc">{{items.itemDesc}}</view>
				</view>
				<view class="right">{{items.deductions}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ruleList: []
			}
		},
		methods: {

		},
		onLoad() {
			this.$api.staffScoreRule().then(res => {
				this.ruleList = res.data.data;
			})
		}
	}
</script>

<style lang="scss" scoped>
	.integral-rule {
		padding: 30rpx;

		.list {
			background: #FFFFFF;
			box-shadow: 0 4rpx 6rpx 1px rgba(84, 83, 83, 0.16);
			border-radius: 16rpx;
			padding: 28rpx;

			.item {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				&:last-child {
					border-bottom: 0;
				}

				.left {
					flex: 1;

					.title {
						height: 38rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
						margin-bottom: 10rpx;
					}

					.desc {
						font-size: 24rpx;
						color: #666666;
						line-height: 36rpx;
						padding-right: 90rpx;
					}
				}
			}
		}

		.tab {
			display: flex;
			justify-content: space-between;
			background: #FEDF6A;
			color: #333;
			font-size: 28rpx;
			line-height: 66rpx;
			padding: 11rpx 30rpx;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			font-weight: bold;

			.line {
				border-right: 1px solid #fff;
			}
		}
	}
</style>
